<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="socket.io.js"></script>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }

    .yf_head {
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      height: 600px;
      width: 600px;
      /* border: 1px solid red; */
    }

    .yf_content {
      height: 20%;
      width: 100%;
      background: url(2.png)no-repeat;
      background-size: 100% 100%;
    }

    .yf_neiru  {
      height: 80%;
      width: 100%;
      /* border: 1px solid lawngreen; */
    }
    .yf_left{
      height: 100%;
      width: 70%;
      float: left;

    }
    .yf_ronde{
      height: 100%;
      width: 30%;
      float: right;
      background: url(1.png)no-repeat;
      background-size: 100% 100%;

    }
.top{
  height: 70%;
  width: 100%;
  background: url(3.png)no-repeat;
  background-size: 100% 100%;
}
.yf_buttne{
  height: 30%;
  width: 100%;

}
.yf_buttne  textarea{
  height: 100%;
  width: 100%;
  background: rgb(143, 142, 142);
  color: #fff

}
 
  </style>
</head>

<body>
  <div class="yf_head">
    <div class="yf_content ">

    </div>
    <div class="yf_neiru ">
      <div class="yf_left">
        <div class="top"></div>  
        <div class="yf_buttne">
    <textarea id="content"></textarea>
  </div>
      </div>
        <div class="yf_ronde"></div>
        
    </div>


    


  </div>



</body>
<script>
  var socket = io.connect('http://localhost:8000');
  //监听welcome事件，接收欢迎消息
  socket.on('welcome', function (data) {
    console.log(data);
  })
  //监听STC事件，接收别的好友发的消息
  socket.on('STC', function (data) {
    console.log('接收：' + data);
  })
  var content = document.querySelector("#content");
  content.onkeyup = function (e) {
    if (e.keyCode == 13) {
      //触发CTS事件，将文本框的值发送给服务器
      socket.emit('CTS', this.value);
      this.value = "";
    }
  }
</script>

</html>